<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; ">
    <title>预约</title>
    <link href="<%=path%>/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="<%=path%>/bm/bootstarp/css/bootstrap.min.css" />
    <link rel="stylesheet" href="<%=path%>/css/marketing/index.css"/>
    <link rel="stylesheet" href="<%=path%>/css/marketing/swiper.css">    
    <link rel="stylesheet" href="<%=path%>/css/marketing/mobiscroll.css">
    <link rel="stylesheet" href="<%=path%>/css/marketing/mobiscroll_002.css">
    <link rel="stylesheet" href="<%=path%>/css/marketing/mobiscroll_003.css">
    
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/activity.css" />
</head>
<body>
    <div hidden="" style='margin:0 auto;width:0px;height:0px;overflow:hidden;'>
       <img id="sharePic" src="" width='700'>
    </div>
    <p hidden="" id="shareContent"></p>
<!--遮罩层-->
    <div class="shade">
        <div class="shade-som">
            <div class="shade-radius">
            </div>
            <div class="shade-som-1 font_color">活动须知</div>
           <ul id="activity_detail_rule" class="shade-som-2">
              
           </ul>
        </div>
    </div>
<!--显示区域-->
    <div class="invitationNavA">
        <div class="invitationNav">
            <div class="invitationNav1">
                <div>
                    <div class="invitationNav-eat font_color"><span></span></div>
                </div>
                <!--轮播区-->
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!--店铺信息区-->
                <div class="message">
                    <div><h3 class="col-xs-2 col-sm-2 font_color">店名:</h3><span id="store_title" class="col-xs-4 col-sm-4 font_color"></span></div>
                    <div><h3 class="col-xs-2 col-sm-2 font_color">地址:</h3><span id="store_address" class="col-xs-10 col-sm-10 font_color"></span></div>
                    <div><h3 class="col-xs-2 col-sm-2 font_color">电话:</h3><span id="store_phone" class="col-xs-4 col-sm-4 font_color"></span></div>
                </div>
                <!--活动须知按钮-->
                <div class="activity font_color">活动须知</div>
                <!--预约填入信息区-->
                <div class="rom dinner">
                    <div class="dinner-make">___<span class="font_color">预约聚餐</span>___</div>
                </div>
                <div class="rom dinner-message">
                    <div class="col-xs-12 col-sm-12">
                        <div>
                            <span class="font_color">姓名</span>
                            <input class="font_color" type="text"  id="p1" maxlength="10" onblur="checkLength(this)"/>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <div>
                            <span class="font_color">手机号</span>
                            <input class="font_color" type="text"  id="p2"  style="ime-mode:disabled;" onkeypress="keyPress()" maxlength="11"/>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <div>
                            <span class="font_color">就餐时间</span>
                            <input class="font_color" style="color:transparent;text-shadow:0 0 0 black;" value="" class="" readonly="readonly" unselectable="on" name="appDateTime" id="appDateTime" type="text">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <div>
                            <span class="font_color">预计人数</span>
                            <input class="font_color" type="text"  id="p4" onkeypress="keyPress()" maxlength="2"/>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <div>
                            <span class="font_color">预约店铺</span>
                            <div class="pullDown"></div>
                            <i class="pull-right" id="pullDownA">

                            </i>
                        </div>
                    </div>
                    <!--下拉菜单-->
                    <ul id="stores" class="col-xs-12 col-sm-12 DownMenu">
                    </ul>
                </div>
                <!--填入信息提示-->
                <div class="col-xs-12 col-sm-12 DownMenu-code font_color">请完善信息方便餐厅给你发送乘车路线</div>
                <!--提交信息-->
                <div class="DownMenu-order"><a class="font_color" id="tijiao" href="javascript:join();">提交预约</a></div>
                <div class="pleasantly">
                    <div class="col-xs-12 col-sm-12">___<span class="font_color">关注有惊喜哦！</span>___</div>
                </div>
                <!--二维码区-->
                <ul class="s_footer">
                   
                </ul>
                <div class="Community font_color"></div>
                <!--尾部-->
                <div class="col-xs-12 col-sm-12 stern">
                    zhfeat提供技术服务
                </div>
            </div>
        </div>
    </div>
    
    <div class="s_popup_delect2">
        <div class="s_consum">
            <p id="dialog_title"><img src="<%=path%>/images/marketing/s_tick.png" /> 活动启用成功</p>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="<%=path%>/js/marketing/index.js"></script>
<script src="<%=path%>/js/marketing/swiper.min.js"></script>
<script src="<%=path%>/js/marketing/mobiscroll_002.js" type="text/javascript"></script>
<script src="<%=path%>/js/marketing/mobiscroll_004.js" type="text/javascript"></script>
<script src="<%=path%>/js/marketing/mobiscroll.js" type="text/javascript"></script>
<script src="<%=path%>/js/marketing/mobiscroll_003.js" type="text/javascript"></script>
<script src="<%=path%>/js/marketing/mobiscroll_005.js" type="text/javascript"></script>
<script src="<%=path%>/js/marketing/validation.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    var ip;
    var activity_type;
    var activity_id;
    var cid;
    var activity_name;
    var number;
    var store_id;
    var time;
    var mobile;
    var name;
    var open_way;
    var web_url;
    
    var share_title;
    var share_content;
    var share_pic;
    var swiper = new Swiper('.swiper-container');
    //判断当前页面是否转发而来
    var transmitTag=0;
    var customer_id;
    $(function() {web_url
		activity_id = getQueryString("activity_id");
		activity_type = getQueryString("type");
		cid=getQueryString("cid");
		customer_id=getQueryString("cid");
		ip=returnCitySN["cip"]+','+returnCitySN["cname"];
		
		if(StringEmpty(getQueryString("isappinstalled"))||StringEmpty(getQueryString("appinstall"))){
			transmitTag=1;
		} else{
			transmitTag=0;
		}
		
		openWay();
		getDetail(); 
		
	});
  //获取活动详情
	function getDetail() {
		customer_id= getQueryString("cid");
		var url="<%=path%>/activity/openActivity";
		$.post(url, {
			"activity_type" : activity_type,
			"cid" : cid,
			"activity_id" : activity_id,
			"browse_ip" : ip,
			"activity_type" : activity_type,
			"open_way":open_way,
			"transmitTag":transmitTag,
			"customer_id" : customer_id,
		}, function(data) {
			
			
			if (data.error_code == "0") {
				initHtml(data.data);
				if(activity_type==1){
					activityStore(data.data.remarks);
				}else{
					activityStore(activity_id);
				}
				getWeinInfo();
			} else {

			}
		});

	}
  
	 //获取活动门店信息
    function activityStore(activity_id){
    	var url = "<%=path%>/activityStore/query";
    	$.post(url,{
			"cid" : cid,
			"activity_id" : activity_id,
    	},function(data){
    		
    		if(data.error_code == "0"){
    			setStoreHtml(data.data);
    	    	
    		}else{
    		}
    	});
    }
	 
	 
	 function initHtml(data){
			share_pic=data.pic;
			share_title=data.title;
			share_content=data.content;
		 
			$("#sharePic").attr("src",share_pic);
			$("shareContent").html(share_content);
			
		 $(document).attr("title",data.name);
		 $(".invitationNav-eat").html(data.name);
		 $('#activity_detail_rule').html(data.detail_rule);
		 if(StringEmpty(data.pic_url)){
				var pics = data.pic_url.split(",");
				var lunbo_html='';
				for(var i=0;i<pics.length;i++){
					lunbo_html+='<div class="swiper-slide">';
					lunbo_html+='<img src="'+pics[i]+'"></div>';
				}
				console.log(lunbo_html);
				$(".swiper-wrapper").html(lunbo_html);
		 }
		//设置二维码
	/* 	 if(StringEmpty(data.weixin_qrcode)){
				console.log("weixin--->");
				var html_weixin='<li><img id="weixin_qrcode" src="'+data.weixin_qrcode+'" /><p class="font_color">微信二维码</p></li>';
				$(".s_footer").append(html_weixin); 
			}
			
         if(StringEmpty(data.weibo_qrcode)){
         	console.log("weibo_qrcode");
         	var html_weibo='<li><img id="weibo_qrcode" src="'+data.weibo_qrcode+'" /><p class="font_color">微博二维码</p></li>';
				$(".s_footer").append(html_weibo); 
		 } */
			if(StringEmpty(data.weixin_qrcode)&&!StringEmpty(data.weibo_qrcode)){
				console.log("weixin--->");
				var html_weixin='<li style="width:100%"><img id="weixin_qrcode" src="'+data.weixin_qrcode+'" /><p>微信二维码</p></li>';
				$(".s_footer").append(html_weixin); 
			}else if(StringEmpty(data.weixin_qrcode)){
				var html_weixin='<li><img id="weixin_qrcode" src="'+data.weixin_qrcode+'" /><p>微信二维码</p></li>';
				$(".s_footer").append(html_weixin); 
			}
			
            if(StringEmpty(data.weibo_qrcode)&&!StringEmpty(data.weixin_qrcode)){
            	console.log("weibo_qrcode");
            	var html_weibo='<li style="width:100%"><img id="weibo_qrcode" src="'+data.weibo_qrcode+'" /><p>微博二维码</p></li>';
				$(".s_footer").append(html_weibo); 
			}else if(StringEmpty(data.weibo_qrcode)){
				var html_weibo='<li><img id="weibo_qrcode" src="'+data.weibo_qrcode+'" /><p>微博二维码</p></li>';
				$(".s_footer").append(html_weibo); 
			}
            if(!StringEmpty(data.weibo_qrcode)&&!StringEmpty(data.weixin_qrcode))
	        	$('.pleasantly').hide();
            
            
            var button_css=data.button_css;
		    var theme_info_color=data.theme_info_color;
		    var text_info_color=data.text_info_color;
		    
		    if(StringEmpty(button_css)&&button_css!="#000000"){
		    	$(".DownMenu-order").css("background-color",button_css);
				$(".activity").css("background-color",button_css);
		    }
		    
		    if(StringEmpty(theme_info_color)&&theme_info_color!="#000000")
		    	$(".invitationNav1").css("background-color",theme_info_color);
		    
		    if(StringEmpty(text_info_color)&&text_info_color!="#000000"){
				$(".font_color").css("color",text_info_color);
			}
	 }
	 
	 function setStoreHtml(data){
		 var html="";
		 for(var i in data){
			 $("#store_title").html(data[i].name);
			 $("#store_address").html(data[i].address);
			 $("#store_phone").html(data[i].phone);
			 html+='<li class="_store" id="'+data[i].id+'" address="'+data[i].address+'" phone="'+data[i].phone+'" name="'+data[i].name+'"><a href="javascript:">'+data[i].name+'</a></li>';
		 }
		 $("#stores").html(html);
	 }
	
     $(document).on('click', '._store', function() {
    	 store_id=this.id;
    	 $("#store_title").html($(this).attr("name"));
		 $("#store_address").html($(this).attr("address"));
		 $("#store_phone").html($(this).attr("phone"));
         $(this).addClass("active").siblings().removeClass("active");
         $(".pullDown").html($(this).attr("name"));
         $("#pullDownA").css({"background":"url('<%=path%>/images/fhbdf.png')  no-repeat 0 15px"});
         $(".DownMenu").hide();
	});
	 
	 //预约
	 function join() {
		  number=$("#p4").val();
		  time=$("#appDateTime").val();
		  name=$("#p1").val();
		  mobile=$("#p2").val();
		  if(StringEmpty(name)&&validatemobile(mobile)&&StringEmpty(time)&&StringEmpty(number)&&number.length<3&&name.length<10){
			  var url="<%=path%>/activity/joinReserve";
				$.post(url, {
					"activity_type" : activity_type,
					"cid" : cid,
					"activity_id" : activity_id,
					"mobile" : mobile,
					"reserve_number" : number,
					"reserve_time" : time,
					"name" : name,
					"reserve_store_id" : store_id,
					"open_way":open_way,
					"transmitTag":transmitTag,
				}, function(data) {
					
					
					if (data.error_code == "0") {
						showDialog("预约成功，预约信息已发送至您的手机，请查看");
						customer_id=data.data;
					} else {
                        showDialog(data.message);
					}
				});
		  }else if(!StringEmpty(name)){
			  showDialog("请输入名称");
		  }else if(!StringEmpty(time)){
			  showDialog("请选择时间");
		  }else if(!StringEmpty(number)){
			  showDialog("请输入人数");
		  }else if(number.length>3){
			  showDialog("人数不能超过100");
		  }else if(name.length>10){
			  showDialog("姓名不能超过10个字符");
		  }
	 }
	 
  //判断字符串是否为空
	function StringEmpty(content) {
		if (content == undefined || content == "" || content == null) {
			return false;
		} else {
			return true;
		}
	}
	   //获取url的参数
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return unescape(r[2]);
		return null;
	}
	   
	/* //校验手机号码
	function validatemobile(mobile) {
		var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
		if (mobile.length == 0) {
			showDialog('请输入手机号码！');
			document.form1.mobile.focus();
			return false;
		} else if (mobile.length != 11) {
			showDialog('请输入有效的手机号码！');
			document.form1.mobile.focus();
			return false;
		} else if (!myreg.test(mobile)) {
			showDialog('请输入有效的手机号码！');
			document.form1.mobile.focus();
			return false;
		} else {
			return true;
		}
	} */
	
	 //判断打开途径
    function openWay(){
    	//微信微博
        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return { //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }


        if (browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
            var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
            console.log("------------ua-->"+ua);
         

            if (browser.versions.ios) {
            	open_way="sms";
            	console.log("ios");
            	
            }
            if (browser.versions.android) {
            	open_way="sms";
            	console.log("android");
            }
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                //微信打开
            	open_way="weixin";
            }
            if (ua.match(/WeiBo/i) == "weibo") {
                //微博打开
            	open_way="weibo";
            }
            if(ua.match(/qq/i) ==
            	"qq" && ua.match(/MicroMessenger/i) !=
            		"micromessenger") {
            	open_way="qq";
                //qq打开
            }else if(navigator.userAgent.indexOf("MQQBrowser")>-1&& ua.match(/MicroMessenger/i) !=
        		"micromessenger"){
            	open_way="qq";
            }
            
            console.log("ssssssssssssssssssss");
        } else {
        	open_way="pc";
            //否则就是PC浏览器打开
        }
    	console.log("open_way--->"+open_way);

    
    }
	function keyPress() {    
	     var keyCode = event.keyCode;    
	     if ((keyCode >= 48 && keyCode <= 57))    
	    {    
	         event.returnValue = true;    
	     } else {    
	           event.returnValue = false;    
	    }    
	 } 
	 
    function showDialog(title){
		$('#dialog_title').html('<img src="<%=path%>/images/marketing/s_tick.png"/>'+title+''); 
		$('.s_popup_delect2,.s_consum').show().delay(2000).fadeOut();
}
 
    
    
    
    
    var timestamp;
    var signature;
    var nonceStr;
    var link_url;
    var appid;
    function getWeinInfo(){
    	 web_url = window.location.href.split('#')[0];  
    	/* web_url = web_url.replace(/\&/g, '%26');  */
    	console.log("web_url------->"+web_url);
    	/* web_url=encodeURIComponent(web_url); */
    	var url="<%=path%>/api/weixin/share";
		$.post(url, {
			"url" : web_url,
		}, function(data) {
			
			timestamp=data.timestamp;
			signature=data.signature;
			nonceStr=data.nonceStr;
			link_url=data.url;
			console.log("substr----->"+link_url);
			console.log("timestamp------->"+timestamp);
			console.log("signature------->"+signature);
			console.log("nonceStr------->"+nonceStr);
			var reg = new RegExp("%26","g");
			link_url=link_url.replace(reg,"&");
			console.log("link_url"+link_url);
			
			if(StringEmpty(customer_id)){
				link_url=link_url+"&cid="+customer_id;
			}
			appid=data.appId;
			config();
		});
    }
    
    function config(){
    	wx.config({
	        debug: false,
	        appId: appid,
	        timestamp: timestamp,
	        nonceStr: nonceStr,
	        signature: signature,
	        jsApiList: [
	          'checkJsApi',
	          'onMenuShareTimeline',
	          'onMenuShareAppMessage',
	          'onMenuShareQQ',
	          'onMenuShareWeibo',
	          'hideMenuItems',
	          'showMenuItems'
	        ]
	    });
    	console.log("config--------------->");
    	
    	
    	 wx.ready(function () {
 	    	console.log("ready----------->");
 	    	  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
 	    	 /*  document.querySelector('#checkJsApi').onclick = function () {
 	    	    
 	    	  }; */
 	    	  wx.checkJsApi({
 	    	      jsApiList: [
 	    	        'getNetworkType',
 	    	        'previewImage'
 	    	      ],
 	    	      success: function (res) {
 	    	        console.log(JSON.stringify(res));
 	    	      }
 	    	    });
 	    	  
 	    	  // 2. 分享接口
 	    	  // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
 	    	
 	    	   /*  document.querySelector('#onMenuShareAppMessage').onclick = function () { */
 				    wx.onMenuShareAppMessage({
 				      title: share_title,
 				      desc: share_content,
 				      link: link_url,
 				      imgUrl: encodeURI(share_pic),
 				      trigger: function (res) {
 				     
 				      },
 				      success: function (res) {
 				    	 transmit("time_line");
 				      },
 				      cancel: function (res) {
 				        
 				      },
 				      fail: function (res) {
 				        /* alert(JSON.stringify(res)); */
 				      }
                 });
 	    	
 				   wx.onMenuShareTimeline({
 					  title: share_title,
 				      desc: share_content,
 				      link: link_url,
 				      imgUrl: share_pic,
 	 	    	      trigger: function (res) {
 	 	    	      },
 	 	    	      success: function (res) {
 	 	    	    	transmit("time_line");
 	 	    	      
 	 	    	      },
 	 	    	      cancel: function (res) {
 	 	    	      },
 	 	    	      fail: function (res) {
 	 	    	        alert(JSON.stringify(res));
 	 	    	      }
 	 	    	    });
 				   wx.onMenuShareQQ({
 					  title: share_title,
 				      desc: share_content,
 				      link: link_url,
 				      imgUrl: share_pic,	 				      
 				      trigger: function (res) {
 				      },
 				      complete: function (res) {
 				        /* alert(JSON.stringify(res)); */
 				      },
 				      success: function (res) {
 				    	 transmit("qq");
 				      
 				      },
 				      cancel: function (res) {
 				      },
 				      fail: function (res) {
 				        /* alert(JSON.stringify(res)); */
 				      }
 				    });
 	    	   
 	    	  // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
 	    	
 	    	   /*  wx.onMenuShareTimeline({
 	    	      title: '互联网之子',
 	    	      link: 'http://movie.douban.com/subject/25785114/',
 	    	      imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
 	    	      trigger: function (res) {
 	    	        alert('用户点击分享到朋友圈');
 	    	      },
 	    	      success: function (res) {
 	    	        alert('已分享');
 	    	      },
 	    	      cancel: function (res) {
 	    	        alert('已取消');
 	    	      },
 	    	      fail: function (res) {
 	    	        alert(JSON.stringify(res));
 	    	      }
 	    	    });
 	    	 
 	    	  // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
 	    	
 	    	    wx.onMenuShareQQ({
 	    	      title: '互联网之子',
 	    	      desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
 	    	      link: 'http://movie.douban.com/subject/25785114/',
 	    	      imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
 	    	      trigger: function (res) {
 	    	        alert('用户点击分享到QQ');
 	    	      },
 	    	      complete: function (res) {
 	    	        alert(JSON.stringify(res));
 	    	      },
 	    	      success: function (res) {
 	    	        alert('已分享');
 	    	      },
 	    	      cancel: function (res) {
 	    	        alert('已取消');
 	    	      },
 	    	      fail: function (res) {
 	    	        alert(JSON.stringify(res));
 	    	      }
 	    	    }); */
 	    	   
 	    	  });
    }
    
    //转发
	function transmit(transmit_way) {
		
		var url="<%=path%>/api/transmit/create";
		$.post(url, {
			"activity_type" : activity_type,
			"cid" : cid,
			"activity_id" : activity_id,
			"transmit_tag": transmitTag,
			"transmit_way": transmit_way,
		
		}, function(data) {
			
			
		});

	} 	 
    

</script>
</html>